<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击按钮实现轮播图V2.0</title>
    <script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        //1.绑定btn按钮的点击事件
        //2.通过id获取div1 通过html方法 往里面添加img标签
        //已经实现图片的点击切换
        //数组：用于保存图片路径
        var imgPaths = ['../../img/1.jpg', '../../img/2.jpg', '../../img/3.jpg'];
        var i = 1;
        $(function () {
            $('#btn').click(function () {
                if (i == imgPaths.length) {
                    i = 0;
                }
                $('#img1').attr('src', imgPaths[i++]);
            });
        });
    </script>
</head>
<body>
<button id="btn">切换图片</button>
<div id="div1" style="margin: 0 auto;width: 1000px;height: 500px">
    <img id="img1" src="../../img/1.jpg" style="width: 100%;height: 100%"/>
</div>
</body>
</html>